<template>
  <div class="myDiv">
    <Header title="金额统计"></Header>
    <div>
      <h2>订单统计</h2>
      <div class="order">
        <div>
          <p>待付款</p>
          <span>{{this.datas.order.idcode}}</span>
        </div>
        <div>
          <p>已付款</p>
          <span>{{this.datas.order.userid}}</span>
        </div>
        <div>
          <p>预约</p>
          <span>{{this.datas.order.username}}</span>
        </div>
      </div>
      <h2>收入情况</h2>
      <div class="order">
        <div>
          <p>总收入</p>
          <span>￥{{this.datas.allmoney[0].orderTotalprice}}</span>
        </div>
        <div>
          <p>支付宝收入</p>
          <span>￥{{this.datas.weixinmoney[4].orderTotalprice}}</span>
        </div>
        <div>
          <p>微信收入</p>
          <span>￥{{this.datas.weixinmoney[0].orderTotalprice}}</span>
        </div>
        <div>
          <p>其他收入</p>
          <span>￥{{this.datas.weixinmoney[2].orderTotalprice}}</span>
        </div>
      </div>
      <h2>本年度收入</h2>
      <div class="order">
        <div>
          <p>总收入</p>
          <span>￥{{this.datas.allmoney[1].orderTotalprice}}</span>
        </div>
        <div>
          <p>支付宝收入</p>
          <span>￥{{this.datas.weixinmoney[5].orderTotalprice}}</span>
        </div>
        <div>
          <p>微信收入</p>
          <span>￥{{this.datas.weixinmoney[1].orderTotalprice}}</span>
        </div>
        <div>
          <p>其他收入</p>
          <span>￥{{this.datas.weixinmoney[3].orderTotalprice}}</span>
        </div>
      </div>
      <h2>实时营业额</h2>
      <div class="order">
        <div>
          <p>今日收入</p>
          <span>￥{{this.datas.timemoney[0].orderTotalprice}}</span>
        </div>
        <div>
          <p>本周收入</p>
          <span>￥{{this.datas.timemoney[1].orderTotalprice}}</span>
        </div>
        <div>
          <p>本月收入</p>
          <span>￥{{this.datas.timemoney[2].orderTotalprice}}</span>
        </div>
      </div>
      <h2>本年度各月份收入金额统计</h2>
      <div id="main" style="width:90%;height:300px;"></div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header";
import echart from "echarts";
export default {
  components: { Header },
  props: {},
  data() {
    return {
      datas: {
        weixinmoney: [
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" }
        ],
        timemoney: [
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" }
        ],
        allmoney: [
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" },
          { orderTotalprice: "" }
        ],
        order: { idcode: "" }
      }, //金额数据
      option: {
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true
          }
        ],
        tooltip: {
          show: true,
          trigger: "axis"
        },
        triggerOn: "mousemove"
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    drawEcharts() {
      let myechart = echart.init(document.getElementById("main"));
      myechart.setOption(this.option);
    }
  },
  created() {
    this.$http(this.api.selectAllMoneyByPayment).then(res => {
      if (res.status == 200) {
        if (res.data.result == "true") {
          this.datas = res.data.pageData.data[0];
        }
      }
    });
    this.$http(this.api.selectmoneyByYear, {}).then(res => {
      res.data.pageData.data.map((item, index) => {
        this.option.xAxis.data.push(item.orderAddr);
        this.option.series[0].data.push(item.orderTotalprice);
        this.drawEcharts();
      });
    });
  },
  mounted() {}
};
</script>
<style scoped>
.myDiv h2 {
  text-align: center;
  margin: 10px 0;
  color: #666;
}
.order {
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
  box-shadow: 0 4px 21.5px 0 rgba(0, 0, 0, 0.08);
}
.order > div {
  margin: 10px 0;
  text-align: center;
}
.order > div p {
  margin-left: 6px;
  font-size: 14px;
}
.order > div span {
  font-size: 15px;
  margin-top: 2px;
  display: inline-block;
}
#main {
  margin: auto;
}
</style>